<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const navShowContent = ref([{
		id: 1,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "楷模列表",
		content: "内容"
	}, {
		id: 2,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "英雄故事",
		content: "内容"
	}, {
		id: 3,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "身边英雄",
		content: "内容"
	}, {
		id: 4,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "物资捐赠",
		content: "内容"
	}])
	const navHideContent = ref([{
		id: 5,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "群众需求",
		content: "内容"
	}, {
		id: 6,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "数据分析",
		content: "内容"
	}])

	const customTabbar = reactive({
		iconState: true,
		title: '更多'
	})
	const itemClick = (index) => {
		uni.setStorage({
			key: 'navListData',
			data: index
		})
		uni.navigateTo({
			url: '/pages/HomeNav/HomeNav'
		})
	}

	function editShowHide() {
		uni.showToast({
			icon: 'error',
			title: '该功能暂未开放'
		})
	}

	function exitLogin() {
		uni.reLaunch({
			url: '/pages/Login/Login'
		})
	}
</script>

<template>
	<NavigationBar :iconState="customTabbar.iconState" :title="customTabbar.title"
		@switchIconState="(state) => {customTabbar.iconState = state}">
	</NavigationBar>
	<view class="homeMore page">
		<scroll-view>
			<view class="showHide">
				<view class="title">
					<view class="row">
						显示入口
					</view>
				</view>
				<view class="navList">
					<NavVue v-if="customTabbar.iconState" :navContent="navShowContent" @navItemClick="itemClick">
					</NavVue>
					<ListView v-else :list="navShowContent" @listItemClick="itemClick"></ListView>
				</view>
			</view>
			<view class="showHide">
				<view class="title">
					<view class="row">
						隐藏入口
					</view>
				</view>
				<view class="navList">
					<NavVue v-if="customTabbar.iconState" :navContent="navHideContent" @navItemClick="itemClick">
					</NavVue>
					<ListView v-else :list="navHideContent" @listItemClick="itemClick"></ListView>
				</view>
			</view>
			<view class="btn">
				<button @click="editShowHide()">编辑</button>
				<button @click="exitLogin()">退出登录</button>
			</view>
		</scroll-view>
	</view>
</template>

<style scoped lang="scss">
	.homeMore {
		margin-top: 10vh;
		/* #ifdef H5 */
		margin-top: 5vh;
		/* #endif */

		.showHide {
			.title {
				width: 100%;
				height: 8vh;
				display: flex;
				align-items: center;

				.row {
					color: #000;
					font-size: 6vw;
					font-weight: bold;
					border-left: $uni-title-border-color solid 1vw;
					padding-left: 4vw;
				}
			}

			.navList {
				.nav {
					.column {
						image {
							width: 10vw;
							height: 10vw;
						}
					}
				}

				.list {
					.row {
						.left {
							image {
								width: 16vw;
								height: 16vw;
								border-radius: 50%;
							}
						}

						.right {
							background-color: aquamarine;

							.column {
								span {}
							}
						}
					}
				}
			}
		}

		.btn {
			margin-top: 4vh;
			padding: 0 4vw;

			button {
				font-size: 4vw;
				border-radius: 6vh;

				&:first-child {
					color: $uni-title-border-color;
					background-color: transparent;
					border: $uni-title-border-color solid 0.5vw;
				}

				&:last-child {
					margin-top: 1vh;
					color: #ffffff;
					background-color: $uni-title-border-color;
				}

			}
		}
	}
</style>